<template>
    <el-skeleton animated :row="11" :loading="gjloading">
    <el-table :data="tableData" v-loading="loading" stripe style="width: 100%" border>
                <el-table-column prop="id" v-if="false" label="编号" width="" />
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column prop="name" label="关卡名" />
                <el-table-column prop="lv" label="等级" width="" />
                <el-table-column prop="labels" label="标签" width="">
                </el-table-column>
                <el-table-column prop="count" label="小关数量" width="" />
                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button size="small" type="primary" plain @click="xz(scope.row)">选择</el-button>&nbsp;
                    </template>
                </el-table-column>
            </el-table>
            <div>
            <el-pagination :current-page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-size="limit" :total="total" :page-sizes="[6, 6 * 2, 6 * 3, 6 * 4, total]"
                layout="prev, pager, next, jumper">
            </el-pagination>
        </div>
    </el-skeleton>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import {getLevels} from '../../api/practice/level/index'
export default defineComponent({
    setup(props,context) {
        const data=reactive({
            page:1,
            limit:5,
            total:0,
            tableData:[],
            loading:false,
            gjloading:true
        })

        const events={
            //关卡数据
            getdata(){
                getLevels({
                    page:data.page,
                    limit:data.limit
                }).then((res:any)=>{
                    data.tableData=res.data.data
                    data.total=res.data.total
                    data.gjloading=false
                })
            },
            //分页
            handleSizeChange(val: any) {
                data.limit = val
                events.getdata();
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdata();
            },
            //选择关卡
            xz: function (data: any) {
                console.log('-------===-', data)
                context.emit("DialogLevel", data)
            },
        }

        onMounted(()=>{
            events.getdata();
        })

        return{
            ...toRefs(data),
            ...events
        }
    },
})
</script>
